<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单详情</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/viptail_cms.css" rel="stylesheet">
    <link href="css/swiper.min.css" rel="stylesheet">
</head>

<body>
    <div class="container" style="position: relative;">
        <!--===================按钮组===================-->
        <div class="row-fluid">
            <div class="btn-toolbar" role="toolbar" aria-label="...">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">返回</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit_user">修改宠物主人信息</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#tag">客服标识</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#close_order">订单关闭</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#del_order">删除订单</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#freeze">冻结订单</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#subsidy_family">寄养家庭补贴</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#subsidy_user">用户补贴</button>
                </div>
            </div>
        </div>
        <!--===================订单基本信息===================-->
        <div id="tip" class="out">*【双击鼠标左键】 开启编辑模式（可对文本进行选中，复制等操作）</div>
        <div class="swiper-container swiper-container-horizontal row-fluid">
            <div class="swiper-wrapper">
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-success">基本信息</li>
                    <li class="list-group-item">订单ID <span>201605182036079632367</span></li>
                    <li class="list-group-item">开始时间 <span>2016-05-26 14:00:00</span></li>
                    <li class="list-group-item">结束时间 <span>2016-05-27 14:00:00</span></li>
                    <li class="list-group-item">订单价格 <span>原价50&nbsp;&nbsp;优惠10&nbsp;&nbsp;实付40</span></li>
                    <li class="list-group-item">订单状态 <span>已支付</span></li>
                    <li class="list-group-item">订单完结时间 <span>2016-05-26</span></li>
                    <li class="list-group-item">客服标识状态 <span>未跟单</span></li>
                    <li class="list-group-item">打赏金额 <span>0.00</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-info">寄养家庭</li>
                    <li class="list-group-item">家庭名称 <span>宠爱有家</span></li>
                    <li class="list-group-item">支付宝 <span>3537551342@qq.com</span></li>
                    <li class="list-group-item">手机 <span>13605014143</span></li>
                    <li class="list-group-item">微信 <span>fCCcvv</span></li>
                    <li class="list-group-item">地区 <span>安徽省-宣城市-郎溪县</span></li>
                    <li class="list-group-item">地址 <span>思明区曾厝垵西里41号凤凰假日旅馆</span></li>
                    <li class="list-group-item">已接订单数 <span>7</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-warning">宠物主人</li>
                    <li class="list-group-item">姓名 <span>朱峰</span></li>
                    <li class="list-group-item">支付宝 <span>3537551342@qq.com</span></li>
                    <li class="list-group-item">手机 <span>13605014143</span></li>
                    <li class="list-group-item">微信 <span>fCCcvv</span></li>
                    <li class="list-group-item">地区 <span>福建省-厦门市-思明区</span></li>
                    <li class="list-group-item">地址 <span>凤凰假日旅馆</span></li>
                    <li class="list-group-item">已下订单数 <span>3</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-danger">寄养宠物1</li>
                    <li class="list-group-item">宠物名 <span>噜噜噜</span></li>
                    <li class="list-group-item">宠物类别 <span>大型犬</span></li>
                    <li class="list-group-item">宠物品种 <span>金毛</span></li>
                    <li class="list-group-item">性别 <span>雄性</span></li>
                    <li class="list-group-item">出生日期 <span>2015-05-18</span></li>
                    <li class="list-group-item">体重 <span>11KG</span></li>
                    <li class="list-group-item">是否绝育 <span>否</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-danger">寄养宠物2</li>
                    <li class="list-group-item">宠物名 <span>嗷嗷嗷</span></li>
                    <li class="list-group-item">宠物类别 <span>小型犬</span></li>
                    <li class="list-group-item">宠物品种 <span>贵宾</span></li>
                    <li class="list-group-item">性别 <span>雌性</span></li>
                    <li class="list-group-item">出生日期 <span>2015-05-18</span></li>
                    <li class="list-group-item">体重 <span>5KG</span></li>
                    <li class="list-group-item">是否绝育 <span>是</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item disabled">服务项目1</li>
                    <li class="list-group-item">服务名 <span>寄养</span></li>
                    <li class="list-group-item">内容 <span>鱼头肉</span></li>
                    <li class="list-group-item">单价 <span>20.00</span></li>
                    <li class="list-group-item">数量 <span>4</span></li>
                    <li class="list-group-item">总价 <span>80.00</span></li>
                </ul>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>
        <!--===================订单备注===================-->
        <div class="row-fluid">
            <div style="color:blue;margin-bottom: 10px;">
                订单备注：【... ...】
            </div>
            <form class="form-search">
                <span>客服备注：</span>
                <input type="text" class="input-xxlarge search-query">
                <button class="btn btn-default" type="button">重置</button>
                <button class="btn btn-default" type="button">保存</button>
            </form>
        </div>
        <div class="row-fluid">
            <!--===================提前结束信息===================-->
            <div class="span6" style="padding:0;padding-right: 5px;">
                <div class="panel panel-default" style="margin-bottom: 0px;">
                    <div class="panel-heading">提前结束信息</div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>申请时间</th>
                                <th>申请理由</th>
                                <th>申请状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2015-05-18</td>
                                <td>临时有事。。。</td>
                                <td>审批中</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--===================操作列表===================-->
            <div class="span6" style="padding:0;padding-left: 5px;">
                <div class="panel panel-default" style="margin-bottom: 0px;">
                    <div class="panel-heading">操作列表</div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>操作时间</th>
                                <th>操作事件</th>
                                <th>操作类型</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2015-05-18</td>
                                <td>删除订单</td>
                                <td>删除</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--===================订单评论===================-->
        <div class="row-fluid">
            <div class="panel panel-default" style="margin-bottom: 0px;">
                <div class="panel-heading">订单评论</div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>评论时间</th>
                            <th>宠物主人</th>
                            <th>寄养家庭</th>
                            <th>评论内容</th>
                            <th>评分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2015-05-18</td>
                            <td>朱峰</td>
                            <td>宠物的家</td>
                            <td>很不错，赞哟~~非常感谢！</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>2015-05-18</td>
                            <td>朱峰</td>
                            <td>宠物的家</td>
                            <td>很不错，赞哟~ </td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>2015-05-18</td>
                            <td>朱峰</td>
                            <td>宠物的家</td>
                            <td>很不错，赞哟~ </td>
                            <td>5</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--===================修改用户提示框===================-->
        <div class="modal fade" id="edit_user">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">支付宝</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">姓名</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================客服标识提示框===================-->
        <div class="modal fade" id="tag">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">订单跟踪状态</label>
                            <select class="form-control">
                                <option>未跟单</option>
                                <option>条件不符</option>
                                <option>回访完成</option>
                                <option>跟单完成</option>
                                <option>处理中</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================关闭订单提示框===================-->
        <div class="modal fade" id="close_order">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要关闭订单吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================删除订单提示框===================-->
        <div class="modal fade" id="del_order">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要删除订单吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================冻结订单提示框===================-->
        <div class="modal fade" id="freeze">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要冻结订单吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================寄养家庭补贴提示框===================-->
        <div class="modal fade" id="subsidy_family">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">请输入寄养家庭补贴金额</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================用户补贴提示框===================-->
        <div class="modal fade" id="subsidy_user">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">请输入用户补贴金额</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3.4,
        spaceBetween: 30,
        freeMode: true,
        grabCursor: true,
        scrollbar: '.swiper-scrollbar'
    });

    var lock = true,tip=$('#tip');
    $('.swiper-container').mouseover(function() {
        tip.removeClass('hide');
    }).mouseout(function() {
        tip.addClass('hide');
    }).dblclick(function() {
        if (lock) {
            tip.text('*【再次双击鼠标左键】 退出编辑模式');
            lock = false;
            swiper.grabCursor = false;
            swiper.detachEvents();
        } else {
            tip.text('*【双击鼠标左键】 开启编辑模式（可对文本进行选中，复制等操作）');
            lock = true;
            swiper.attachEvents();
        }
    });
    </script>
</body>

</html>
